<!DOCTYPE html>
<!-- saved from url=(0039)http://www.bootcss.com/scaffolding.html -->
<html class="no-js"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>脚手架 · Bootstrap中文网</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。">
    <meta name="author" content="Bootstrap中文网">
    <meta name="keywords" content="Bootstrap,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
    <meta name="robots" content="index,follow">
    <meta name="application-name" content="bootcss.com">

    <!-- Le styles -->
    <link href="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="http://www.bootcss.com/assets/css/docs.css" rel="stylesheet">
    <style>
    h1, h2, h3, .masthead p, .subhead p, .marketing h2, .lead
{
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
  font-weight: normal;
}

#scrollUp {
  bottom: 20px;
  right: 20px;
  height: 38px;  /* Height of image */
  width: 38px; /* Width of image */
  background: url("assets/img/top.png") no-repeat;
}
    </style>
    <link href="http://www.bootcss.com/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    <link href="http://www.bootcss.com/assets/css/bootstro.min.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.bootcss.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.bootcss.com/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.bootcss.com/assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.bootcss.com/assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="http://www.bootcss.com/assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="http://www.bootcss.com/assets/ico/favicon.png">


    <script>
var _hmt = _hmt || [];
</script>
  <style id="holderjs-style" type="text/css">.holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}</style></head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">

    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://www.bootcss.com/">Bootstrap中文网</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="http://www.bootcss.com/">首页</a>
              </li>
              <li class="">
                <a href="http://www.bootcss.com/getting-started.html" class="bootstro" data-bootstro-title="这里介绍了从零开始使用Bootstrap的基本步骤。教你创建一个最简单的Bootstrap页面。" data-bootstro-placement="bottom" data-bootstro-step="0">起步</a>
              </li>
              <li class="active">
                <a href="./脚手架 · Bootstrap中文网_files/脚手架 · Bootstrap中文网.html" class="bootstro" data-bootstro-title="这里详细介绍了Bootstrap的栅格系统。对于栅格系统的理论知识，最好动手谷歌一下！" data-bootstro-placement="bottom" data-bootstro-step="1">脚手架</a>
              </li>
              <li class="">
                <a href="http://www.bootcss.com/base-css.html" class="bootstro" data-bootstro-title="这里介绍了Bootstrap对HTML标签所设置的默认样式。任何一个符合HTML5规范的页面只要引入Bootstrap就自然具有了优雅的外观，这就是Bootstrap的功劳！" data-bootstro-placement="bottom" data-bootstro-step="2">基本CSS样式</a>
              </li>
              <li class="">
                <a href="http://www.bootcss.com/components.html" class="bootstro" data-bootstro-title="这里介绍了常用的诸如按钮、弹框、导航条、下拉菜单、进度条等等常见的页面组件。按照例子照猫画虎就可以，熟能生巧。这些都不需要刻意去记忆，需要的时候随时回来翻文档，然后复制、粘贴即可！" data-bootstro-placement="bottom" data-bootstro-step="3">组件</a>
              </li>
              <li class="">
                <a href="http://www.bootcss.com/javascript.html" class="bootstro" data-bootstro-title="这里介绍了Bootstrap自带的具有交互功能的组件。页面要想与用户交互当然离不开Javascript了。Bootstrap的组件都是基于jQuery的，你熟悉jQuery吗？建议谷歌一下。" data-bootstro-placement="bottom" data-bootstro-step="4">JavaScript插件</a>
              </li>
              <li class="">
                <a href="http://www.bootcss.com/customize.html" class="bootstro" data-bootstro-title="在这里可以通过设置Bootstrap提供的参数改变Bootstrap的样貌。我们不建议过早接触这里，在你熟悉Bootstrap阶段，最好是通过覆盖样式的方式修改Bootstrap默认的外观。等你需要深入了解Bootstrap时，可以先学习Lesscss ---&gt;&gt;&gt;" data-bootstro-placement="bottom" data-bootstro-step="5">定制</a>
              </li>
              <li class="lesscss">
                <a href="http://www.bootcss.com/lesscss.html" class="bootstro" data-bootstro-title="Lesscss是一种预编译脚本，编译之后就是你所熟悉的CSS了。Bootstrap就是采用Less语法书写的。想要深入Bootstrap底层的同学一定要看这里打好基础！" data-bootstro-placement="bottom" data-bootstro-step="6">Lesscss教程</a>
              </li>

              <li class="">
                <a href="http://www.bootcss.com/about.html">关于</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>脚手架</h1>
    <p class="lead">Bootstrap建立在12列栅格系统、布局、组件之上。</p>
  </div>
</header>

  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix">
          <li><a href="http://www.bootcss.com/scaffolding.html#global"><i class="icon-chevron-right"></i> 全局样式表</a></li>
          <li><a href="http://www.bootcss.com/scaffolding.html#gridSystem"><i class="icon-chevron-right"></i> 栅格系统</a></li>
          <li><a href="http://www.bootcss.com/scaffolding.html#fluidGridSystem"><i class="icon-chevron-right"></i> 流式栅格系统</a></li>
          <li><a href="http://www.bootcss.com/scaffolding.html#layouts"><i class="icon-chevron-right"></i> 布局</a></li>
          <li><a href="http://www.bootcss.com/scaffolding.html#responsive"><i class="icon-chevron-right"></i> 响应式设计</a></li>
        </ul>
      </div>
      <div class="span9">



        <!-- Global Bootstrap settings
        ================================================== -->
        <section id="global">
          <div class="page-header">
            <h1>全局设置</h1>
          </div>

          <h3>必须使用HTML5文档类型</h3>
          <p>Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。</p>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="dec">&lt;!DOCTYPE html&gt;</span></li><li class="L1"><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">  ...</span></li><li class="L3"><span class="tag">&lt;/html&gt;</span></li></ol></pre>

          <h3>排版和链接</h3>
          <p>Bootstrap 为屏幕、排版和链接设置了基本的全局样式。尤其是，我们:</p>
          <ul>
            <li>移除了body的 <code>margin</code></li>
            <li>设置了 <code>body</code> 的背景颜色 <code>background-color: white;</code></li>
            <li>使用 <code>@baseFontFamily</code>、<code>@baseFontSize</code> 和<code>@baseLineHeight</code> 属性作为我们排版的基础</li>
            <li>通过 <code>@linkColor</code> 设置全局链接颜色，并且，当链接处于 <code>:hover</code> 状态时才会带有下划线</li>
          </ul>
          <p>这些样式可以在 <strong>scaffolding.less</strong> 文件中找到。</p>

          <h3>用Normalize重置样式</h3>
          <p>从 Bootstrap 2 开始, 老的重置方式被 <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a> 取代, 这是 <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> 和<a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a> 共同维护的一个项目，这一项目还被 <a href="http://html5boilerplate.com/" target="_blank">HTML5 Boilerplate</a> 所采用。虽然我们在<strong>reset.less</strong> 文件中使用了许多Normalize的代码，但是，我们也移除了一些不适合Bootstrap的元素。</p>

        </section>




        <!-- Grid system
        ================================================== -->
        <section id="gridSystem">
          <div class="page-header">
            <h1>默认栅格系统</h1>
          </div>

          <h2>栅格系统示例</h2>
          <p>Bootstrap默认的栅格系统为<strong>12列</strong> ，形成一个940px宽的容器，默认没有启用 <a href="http://www.bootcss.com/scaffolding.html#responsive">响应式布局特性</a> 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。</p>
          <div class="bs-docs-grid">
            <div class="row show-grid">
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
            </div>
            <div class="row show-grid">
              <div class="span2">2</div>
              <div class="span3">3</div>
              <div class="span4">4</div>
            </div>
            <div class="row show-grid">
              <div class="span4">4</div>
              <div class="span5">5</div>
            </div>
            <div class="row show-grid">
              <div class="span9">9</div>
            </div>
          </div>

          <h3>带有基本栅格的HTML代码</h3>
          <p>对于简单的两列式布局，创建一个 <code>.row</code> 容器，并在容器中加入合适数量的 <code>.span*</code> 列即可。由于默认是12列的栅格，所有 <code>.span*</code> 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span4"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span8"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
          <p>上面的代码展示了 <code>.span4</code> 和 <code>.span8</code> 两列，两列的和总共是12个栅格。</p>

          <h2>偏移列</h2>
          <p>把列向右移动可使用 <code>.offset*</code> 类。每个类都给列的左边距增加了指定单位的列。例如，<code>.offset4</code> 将 <code>.span4</code> 右移了4个列的宽度。</p>
          <div class="bs-docs-grid">
            <div class="row show-grid">
              <div class="span4">4</div>
              <div class="span3 offset2">3 offset 2</div>
            </div><!-- /row -->
            <div class="row show-grid">
              <div class="span3 offset1">3 offset 1</div>
              <div class="span3 offset2">3 offset 2</div>
            </div><!-- /row -->
            <div class="row show-grid">
              <div class="span6 offset3">6 offset 3</div>
            </div><!-- /row -->
          </div>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span4"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span3 offset2"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="tag">&lt;/div&gt;</span></li></ol></pre>

          <h2>嵌套列</h2>
          <p>在默认的栅格系统里, 在已有的<code>.span*</code>内添加一个新的 <code>.row</code> 并加入 <code>.span*</code> 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>
          <div class="row show-grid">
            <div class="span9">
              Level 1 column
              <div class="row show-grid">
                <div class="span6">
                  Level 2
                </div>
                <div class="span3">
                  Level 2
                </div>
              </div>
            </div>
          </div>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span9"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">    Level 1 column</span></li><li class="L3"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span></li><li class="L4"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span6"</span><span class="tag">&gt;</span><span class="pln">Level 2</span><span class="tag">&lt;/div&gt;</span></li><li class="L5"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span3"</span><span class="tag">&gt;</span><span class="pln">Level 2</span><span class="tag">&lt;/div&gt;</span></li><li class="L6"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></li><li class="L7"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></li><li class="L8"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
        </section>



        <!-- Fluid grid system
        ================================================== -->
        <section id="fluidGridSystem">
          <div class="page-header">
            <h1>流式栅格系统</h1>
          </div>

          <h2>流式栅格系统案例</h2>
          <p>流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。</p>
          <div class="bs-docs-grid">
            <div class="row-fluid show-grid">
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
            </div>
            <div class="row-fluid show-grid">
              <div class="span4">4</div>
              <div class="span4">4</div>
              <div class="span4">4</div>
            </div>
            <div class="row-fluid show-grid">
              <div class="span4">4</div>
              <div class="span8">8</div>
            </div>
            <div class="row-fluid show-grid">
              <div class="span6">6</div>
              <div class="span6">6</div>
            </div>
            <div class="row-fluid show-grid">
              <div class="span12">12</div>
            </div>
          </div>

          <h3>基本的流式栅格HTML代码片段</h3>
          <p>将 <code>.row</code> 替换为 <code>.row-fluid</code> 就能让任何一行“流动”起来。应用于每一列的类不用改变，这样能方便的在流式与固定栅格之间切换。</p>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row-fluid"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span4"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span8"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="tag">&lt;/div&gt;</span></li></ol></pre>

          <h2>流式栅格的偏移</h2>
          <p>定义方式和固定网格系统相同：给任何想偏移的列添加 <code>.offset*</code> 即可。</p>
          <div class="bs-docs-grid">
            <div class="row-fluid show-grid">
              <div class="span4">4</div>
              <div class="span4 offset4">4 offset 4</div>
            </div><!-- /row -->
            <div class="row-fluid show-grid">
              <div class="span3 offset3">3 offset 3</div>
              <div class="span3 offset3">3 offset 3</div>
            </div><!-- /row -->
            <div class="row-fluid show-grid">
              <div class="span6 offset6">6 offset 6</div>
            </div><!-- /row -->
          </div>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row-fluid"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span4"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span4 offset2"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="tag">&lt;/div&gt;</span></li></ol></pre>

          <h2>流式嵌套布局</h2>
          <p>和固定栅格的嵌套有一点不同：被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度。</p>
          <div class="row-fluid show-grid">
            <div class="span12">
              Fluid 12
              <div class="row-fluid show-grid">
                <div class="span6">
                  Fluid 6
                  <div class="row-fluid show-grid">
                    <div class="span6">
                      Fluid 6
                    </div>
                    <div class="span6">
                      Fluid 6
                    </div>
                  </div>
                </div>
                <div class="span6">
                  Fluid 6
                </div>
              </div>
            </div>
          </div>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row-fluid"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span12"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">    Fluid 12</span></li><li class="L3"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row-fluid"</span><span class="tag">&gt;</span></li><li class="L4"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span6"</span><span class="tag">&gt;</span></li><li class="L5"><span class="pln">        Fluid 6</span></li><li class="L6"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row-fluid"</span><span class="tag">&gt;</span></li><li class="L7"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span6"</span><span class="tag">&gt;</span><span class="pln">Fluid 6</span><span class="tag">&lt;/div&gt;</span></li><li class="L8"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span6"</span><span class="tag">&gt;</span><span class="pln">Fluid 6</span><span class="tag">&lt;/div&gt;</span></li><li class="L9"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></li><li class="L0"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></li><li class="L1"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span6"</span><span class="tag">&gt;</span><span class="pln">Fluid 6</span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></li><li class="L4"><span class="tag">&lt;/div&gt;</span></li></ol></pre>

        </section>




        <!-- Layouts (Default and fluid)
        ================================================== -->
        <section id="layouts">
          <div class="page-header">
            <h1>布局</h1>
          </div>

          <h2>固定布局</h2>
          <p>提供了一个通用的固定宽度(也可以变为响应式)的布局方式，仅仅用 <code>&lt;div class="container"&gt;</code> 即可。</p>
          <div class="mini-layout">
            <div class="mini-layout-body"></div>
          </div>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;body&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">    ...</span></li><li class="L3"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></li><li class="L4"><span class="tag">&lt;/body&gt;</span></li></ol></pre>

          <h2>流式布局</h2>
          <p>利用 <code>&lt;div class="container-fluid"&gt;</code> 代码可以创建一个流式、两列的页面 — 非常适合于应用和文档类页面。</p>
          <div class="mini-layout fluid">
            <div class="mini-layout-sidebar"></div>
            <div class="mini-layout-body"></div>
          </div>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container-fluid"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row-fluid"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span2"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">      </span><span class="com">&lt;!--Sidebar content--&gt;</span></li><li class="L4"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></li><li class="L5"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"span10"</span><span class="tag">&gt;</span></li><li class="L6"><span class="pln">      </span><span class="com">&lt;!--Body content--&gt;</span></li><li class="L7"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></li><li class="L8"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></li><li class="L9"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
        </section>




        <!-- Responsive design
        ================================================== -->
        <section id="responsive">
          <div class="page-header">
            <h1>响应式设计</h1>
          </div>

          <h2>启用响应式特性</h2>
          <p>通过在文档中的 <code>&lt;head&gt;</code> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。</p>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">&gt;</span></li><li class="L1"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"assets/css/bootstrap-responsive.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span></li></ol></pre>
          <p><span class="label label-info">注意！</span> Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。</p>

          <h2>关于响应式Bootstrap</h2>
          <img src="./脚手架 · Bootstrap中文网_files/responsive-illustrations.png" alt="Responsive devices" style="float: right; margin: 0 0 20px 20px;">
          <p>Media queries允许在一些条件基础上自定义CSS 例如：—ratios、widths、display type, etc— 但通常都是围绕着 <code>min-width</code> 和 <code>max-width</code> 这两者。</p>
          <ul>
            <li>修改栅格系统中列的宽度</li>
            <li>需要的时候, 用堆叠元素代替浮动</li>
            <li>调整标题和文本的大小以便适合各种设备</li>
          </ul>
          <p>谨慎的使用media queries，先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。</p>

          <h2>被支持的设备</h2>
          <p>Bootstrap 所支持的几个media queries都放在了一个文件中， 可以让你的项目更灵活的去适应不同设备和屏幕分辨率。包括：</p>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>类型</th>
                <th>布局宽度</th>
                <th>列宽</th>
                <th>间隙宽度</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>大屏幕</td>
                <td>大于等于1200px</td>
                <td>70px</td>
                <td>30px</td>
              </tr>
              <tr>
                <td>默认</td>
                <td>大于等于980px</td>
                <td>60px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>平板</td>
                <td>大于等于768px</td>
                <td>42px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>手机到平板</td>
                <td>小于等于767px</td>
                <td class="muted" colspan="2">流式列，无固定宽度</td>
              </tr>
              <tr>
                <td>手机</td>
                <td>小于等于480px</td>
                <td class="muted" colspan="2">流式列，无固定宽度</td>
              </tr>
            </tbody>
          </table>
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="com">/* 大屏幕 */</span></li><li class="L1"><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1200px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span></li><li class="L2"><span class="pln">&nbsp;</span></li><li class="L3"><span class="com">/* 平板电脑和小屏电脑之间的分辨率 */</span></li><li class="L4"><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">768px</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">and</span><span class="pln"> </span><span class="pun">(</span><span class="pln">max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">979px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span></li><li class="L5"><span class="pln">&nbsp;</span></li><li class="L6"><span class="com">/* 横向放置的手机和竖向放置的平板之间的分辨率 */</span></li><li class="L7"><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">767px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span></li><li class="L8"><span class="pln">&nbsp;</span></li><li class="L9"><span class="com">/* 横向放置的手机及分辨率更小的设备 */</span></li><li class="L0"><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">480px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span></li></ol></pre>


          <h2>响应式布局辅助class</h2>
          <p>为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 <code>responsive.less</code> 文件中找到。</p>
          <table class="table table-bordered table-striped responsive-utilities">
            <thead>
              <tr>
                <th>Class</th>
                <th>手机 <small>767px 及以下</small></th>
                <th>平板 <small>979px 到 768px</small></th>
                <th>电脑 <small>默认</small></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th><code>.visible-phone</code></th>
                <td class="is-visible">显示</td>
                <td class="is-hidden">隐藏</td>
                <td class="is-hidden">隐藏</td>
              </tr>
              <tr>
                <th><code>.visible-tablet</code></th>
                <td class="is-hidden">隐藏</td>
                <td class="is-visible">显示</td>
                <td class="is-hidden">隐藏</td>
              </tr>
              <tr>
                <th><code>.visible-desktop</code></th>
                <td class="is-hidden">隐藏</td>
                <td class="is-hidden">隐藏</td>
                <td class="is-visible">显示</td>
              </tr>
              <tr>
                <th><code>.hidden-phone</code></th>
                <td class="is-hidden">隐藏</td>
                <td class="is-visible">显示</td>
                <td class="is-visible">显示</td>
              </tr>
              <tr>
                <th><code>.hidden-tablet</code></th>
                <td class="is-visible">显示</td>
                <td class="is-hidden">隐藏</td>
                <td class="is-visible">显示</td>
              </tr>
              <tr>
                <th><code>.hidden-desktop</code></th>
                <td class="is-visible">显示</td>
                <td class="is-visible">显示</td>
                <td class="is-hidden">隐藏</td>
              </tr>
            </tbody>
          </table>

          <h3>何时使用</h3>
          <p>在有限的情况下使用, 避免创建同一个站点的不同版本。当这些class能对每种设备的展示做有益的补充的时候才使用。响应式工具不能用于table元素，而且本就不支持。</p>

          <h3>响应式工具测试案例</h3>
          <p>调整浏览器的宽度或者在不同的设备上加载该页面用以测试上述的class。</p>
          <h4>在...上显示</h4>
          <p>绿色选中标记用以指示这些class在你当前的可视窗口是可见的。</p>
          <ul class="responsive-utilities-test">
            <li>手机<span class="visible-phone">✔ 手机</span></li>
            <li>平板<span class="visible-tablet">✔ 平板</span></li>
            <li>电脑<span class="visible-desktop">✔ 电脑</span></li>
          </ul>
          <h4>在...上隐藏</h4>
          <p>这里的绿色选中标记用以指示这些class在你当前的可视窗口是隐藏的。</p>
          <ul class="responsive-utilities-test hidden-on">
            <li>手机<span class="hidden-phone">✔ 手机</span></li>
            <li>平板<span class="hidden-tablet">✔ 平板</span></li>
            <li>电脑<span class="hidden-desktop">✔ 电脑</span></li>
          </ul>

        </section>



      </div>
    </div>

  </div>



    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com/" target="_blank">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
        <p>本网站所列开源项目的中文版文档全部由<a href="http://www.bootcss.com/">Bootstrap中文网</a>成员翻译，并全部遵循 <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>协议发布。</p>
        <ul class="footer-links">
          <li><a href="http://www.bootcss.com/about.html" target="_blank">关于</a></li>
          <li class="muted">·</li>
          <li><a href="https://github.com/twitter/bootstrap/issues?state=open" target="_blank">问题反馈</a></li>
          <li class="muted">·</li>
          <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">版本变更记录</a></li>
          <li><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></li>
        </ul>
      </div>
    </footer>



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="./脚手架 · Bootstrap中文网_files/jquery.min.js"></script>
    <script src="./脚手架 · Bootstrap中文网_files/jquery.unveil.min.js"></script>
    <script src="./脚手架 · Bootstrap中文网_files/bootstrap.min.js"></script>
    <script src="./脚手架 · Bootstrap中文网_files/bootstro.min.js"></script>
    <script src="./脚手架 · Bootstrap中文网_files/prettify.js"></script>

  <script src="./脚手架 · Bootstrap中文网_files/jquery.scrollUp.min.js"></script>
    <script>
      $(document).ready(function(){
        $("img.lazy").unveil();
        
             $("#start-intro").click(function(){
                bootstro.start();    
            });

             $.scrollUp({
                  scrollName: 'scrollUp', // Element ID
                  topDistance: '300', // Distance from top before showing element (px)
                  topSpeed: 300, // Speed back to top (ms)
                  animation: 'fade', // Fade, slide, none
                  animationInSpeed: 200, // Animation in speed (ms)
                  animationOutSpeed: 200, // Animation out speed (ms)
                  scrollText: '', // Text for element
                  activeOverlay: false  // Set CSS color to display scrollUp active point, e.g '#00FFFF'
            });
          });
    </script>

    <!-- Analytics
    ================================================== -->
    <script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F3d8e7fc0de8a2a75f2ca3bfe128e6391' type='text/javascript'%3E%3C/script%3E"));
    </script><script src="./脚手架 · Bootstrap中文网_files/h.js" type="text/javascript"></script>

    
    <script src="./脚手架 · Bootstrap中文网_files/holder.js"></script>
    <script src="./脚手架 · Bootstrap中文网_files/application.js"></script>
  

<a id="scrollUp" href="http://www.bootcss.com/scaffolding.html#top" title="" style="position: fixed; z-index: 2147483647;"></a></body></html>